<template>
	<div class="game-container report-container addMember-container">
		<div class="line-member"></div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>{{ $t('system.account_settings.settings') }}</span>
			</div>
			<el-form
				ref="form"
				label-width="150px"
				:model="form"
				:rules="rules"
			>
				<div class="ctbox">
					<div class="block">
						<el-avatar :size="150" :src="circleUrl"></el-avatar>
					</div>
				</div>

				<el-form-item class="pding" :label="`${$t('system.name')}:`">
					<el-input
						v-model="form.userName"
						v-symbols
						class="text"
						readonly
						disabled
						unselectable="on"
						size="medium"
						type="text"
						maxlength="6"
					></el-input>
				</el-form-item>
				<el-form-item :label="`${$t('common.name')}:`">
					<el-input
						v-model="form.nickName"
						v-symbols
						type="text"
						class="text"
						size="medium"
						readonly="readonly"
						disabled
						maxlength="6"
					></el-input>
				</el-form-item>
				<!-- <el-form-item label="联系电话：">
					<el-input
						v-model.trim="form.phone"
						v-symbols
						autocomplete="off"
						size="medium"
						placeholder="请输入联系电话"
						maxlength="11"
						@change="confirmTelephone"
					></el-input>
				</el-form-item> -->
				<el-form-item
					:label="`${$t('system.account_settings.old_pwd')}:`"
					prop="pwd"
				>
					<el-input
						v-model.trim="form.pwd"
						autocomplete="new-password"
						:type="passwordType"
						maxlength="11"
						name="password"
						size="medium"
						:placeholder="
							$t('system.account_settings.please_enter_pwd')
						"
					></el-input>
					<span class="show-pwd" @click="showPwd">
						<svg-icon
							:icon-class="
								passwordType === 'password' ? 'eye' : 'eye-open'
							"
						/>
					</span>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.account_settings.new_pwd')}:`"
					prop="newPwd"
				>
					<el-input
						v-model.trim="form.newPwd"
						onkeyup="value=value.replace(/[\u4e00-\u9fa5/\s+/]/ig,'')"
						:type="newPwdType"
						name="newPwd"
						size="medium"
						:placeholder="
							$t('system.account_settings.please_enter_newpwd')
						"
						maxlength="11"
					></el-input>
					<span class="show-pwd" @click="shownewPwd">
						<svg-icon
							:icon-class="
								newPwdType === 'password' ? 'eye' : 'eye-open'
							"
						/>
					</span>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.account_settings.res_Pwd')}:`"
					prop="resPwd"
				>
					<el-input
						v-model.trim="form.resPwd"
						:type="reNewPwdType"
						name="resPwd"
						size="medium"
						:placeholder="
							$t('system.account_settings.please_enter_res_Pwd')
						"
						maxlength="11"
					></el-input>
					<span class="show-pwd" @click="showreNewPwd">
						<svg-icon
							:icon-class="
								reNewPwdType === 'password' ? 'eye' : 'eye-open'
							"
						/>
					</span>
				</el-form-item>

				<el-form-item label-width="50px" style="text-align: center;">
					<el-button
						type="primary"
						class="dut"
						size="medium"
						:loading="loading"
						:disabled="loading"
						@click="onUpdateUser"
					>
						{{ $t('system.account_settings.confirm_modification') }}
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
import list from '@/mixins/list'
import md5 from 'js-md5'
import validate from '@/mixins/validate'
import dataHandle from '@/utils/encrypt'

export default {
	// eslint-disable-next-line vue/name-property-casing
	name: 'accountSettings',
	mixins: [list, validate],
	data() {
		this.onUpdateUser = this.throttle(this.onUpdateUser, 1000)
		return {
			circleUrl:
				'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
			passwordType: 'password',
			newPwdType: 'newPwd',
			reNewPwdType: 'resPwd',
			loading: false,
			form: {
				nickName: undefined,
				newPwd: undefined,
				phone: undefined,
				pwd: undefined,
				resPwd: undefined,
				type: '1',
				userName: undefined,
				userId: undefined
			}
		}
	},
	computed: {
		rules() {
			const reNewPwds = (rule, value, callback) => {
				if (!value) {
					callback(
						new Error(
							this.$t(
								'system.account_settings.please_enter_pwdnew'
							)
						)
					)
				} else if (value !== this.form.newPwd) {
					callback(
						new Error(
							this.$t(
								'system.account_settings.two_entries_inconsistent'
							)
						)
					)
				} else {
					callback()
				}
			}
			const pwds = (rule, value, callback) => {
				if (!value) {
					callback(
						new Error(
							this.$t(
								'system.account_settings.Please_enter_old_password'
							)
						)
					)
				} else {
					callback()
				}
			}
			const newPwds = (rule, value, callback) => {
				const reg = /^[0-9A-Z-a-z]{6,11}$/
				if (!value) {
					callback(
						new Error(
							this.$t(
								'system.account_settings.please_enter_new_password'
							)
						)
					)
				} else if (!reg.test(value)) {
					callback(
						new Error(this.$t('system.account_settings.6-11pwd'))
					)
				} else if (value.length < 6 || value.length > 11) {
					callback(
						new Error(this.$t('system.account_settings.6-11pwd'))
					)
				} else {
					callback()
				}
			}

			const pwd = [
				{
					required: true,
					validator: pwds,
					trigger: 'blur'
				}
			]
			const phone = [
				{
					required: true,
					message: this.$t('member.please_enter_your_mobile_number'),
					trigger: 'blur'
				}
			]
			const newPwd = [
				{
					required: true,
					validator: newPwds,
					trigger: 'blur'
				}
			]
			const resPwd = [
				{
					required: true,
					validator: reNewPwds,
					trigger: 'blur'
				}
			]
			return {
				pwd,
				newPwd,
				phone,
				resPwd
			}
		}
	},
	created() {},
	mounted() {},
	methods: {
		showPwd() {
			if (this.passwordType === 'password') {
				this.passwordType = ''
			} else {
				this.passwordType = 'password'
			}
		},
		shownewPwd() {
			if (this.newPwdType === 'password') {
				this.newPwdType = ''
			} else {
				this.newPwdType = 'password'
			}
		},
		showreNewPwd() {
			if (this.reNewPwdType === 'password') {
				this.reNewPwdType = ''
			} else {
				this.reNewPwdType = 'password'
			}
		},
		confirmTelephone() {
			if (!/^1[0-9]{10}$/.test(this.form.phone)) {
				this.form.phone = ''
			}
		},
		loadData() {
			const data =
				dataHandle.decryptData(window.localStorage.getItem('d1')) || ''
			const id = data ? JSON.parse(data) : ''
			this.$api
				.getuserInfolist({ id })
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						const { id, userName, phone, nickName } = res.data || {}
						this.form.userId = id
						this.form.userName = userName
						this.form.nickName = nickName
						this.form.phone = phone
					} else {
						this.$message({
							message: res?.msg || '接口请求异常',
							type: 'error'
						})
					}
				})
				.catch(() => (this.loading = false))
		},
		onUpdateUser(form) {
			const params = {
				...this.form
			}

			this.$refs.form.validate((valid) => {
				if (valid) {
					const userName = params.userName || ''
					this.loading = true
					this.$api
						.setSystemUserUpdatePwdAdmin({
							pwd: md5(userName.trim() + params.pwd.trim()),
							resPwd: md5(userName.trim() + params.resPwd.trim()),
							newPwd: md5(userName.trim() + params.newPwd.trim()),
							userId: params.userId,
							userName: params.userName,
							phone: params.phone,
							type: 1
						})
						.then((res) => {
							if (res?.code === 200) {
								this.$message.success(
									this.$t('common.modify_success')
								)
								setTimeout(() => {
									this.$store
										.dispatch('user/logout')
										.then((_) => {
											location.reload()
										})
										.catch()('success')
								}, 500)
							} else {
								this.$message({
									message: res?.msg || '接口请求异常',
									type: 'error'
								})
							}
							this.loading = false
						})
						.catch(() => (this.loading = false))
				}
			})
		},
		reset() {
			this.$refs['form'].resetFields()
			this.form = {
				newPwd: undefined,
				phone: undefined,
				pwd: undefined,
				resPwd: undefined,
				type: '1',
				userId: undefined,
				userName: undefined
			}
		},
		checkValue(val) {}
	}
}
</script>

<style lang="scss" scoped>
.forbid {
	background: #889aa4;
}
.pding {
	padding-top: 40px;
}
$dark_gray: #889aa4;
.dut {
	width: 150px;
	// margin-left: 165px;
}
.show-pwd {
	position: absolute;
	right: 10px;
	top: 4px;
	font-size: 16px;
	color: $dark_gray;
	cursor: pointer;
	user-select: none;
}
.ctbox {
	width: 300px;
	margin: 0 auto;
	.block {
		text-align: center;
		margin-left: 50px;
	}
}

::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .el-form {
	margin: 0 auto;
	width: 700px;
}
::v-deep .box-card {
	margin: 0 auto;
	width: 900px;
	height: 680px;
}
.addMember-container {
	padding-top: 30px;
}
</style>
